<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
        xmlns:g='urn:import:com.google.gwt.user.client.ui'
        xmlns:pchrc='urn:import:org.dyndns.merelin.pchrc.client'>

    <ui:image field='gradient' src='gradient_bg_dark.png' repeatStyle='Horizontal'/>

    <ui:style>
        .outer {
            border-left: 1px solid #999;
            border-bottom: 1px solid #999;
            cursor: pointer;
            cursor: hand;
        }

        @sprite .header {
            gwt-image: 'gradient';
            background-color: #d3d6dd;
            table-layout: fixed;
            width: 100%;
            height: 100%;
        }

        .header td {
            font-weight: bold;
            text-shadow: #fff 0 2px 2px;
            padding: 2px 0 1px 10px;
            border-top: 1px solid #999;
            border-bottom: 1px solid #999;
        }

        .table {
            table-layout: fixed;
            width: 100%;
        }

        .table td {
            border-top: 1px solid #fff;
            border-bottom: 1px solid #fff;
            padding: 2px 0 2px 10px;
        }
    </ui:style>

    <ui:style field='selectionStyle' type='org.dyndns.merelin.pchrc.client.MailList.SelectionStyle'>
        .selectedRow {
            background: #adcce7;
        }

        .selectedRow td {
            border-top: 1px solid #88a4d6;
            border-bottom: 1px solid #7b97d0;
        }
    </ui:style>

    <g:DockLayoutPanel styleName='{style.outer}' unit='EM'>
        <g:north size='2'>
            <g:FlexTable ui:field='header' styleName='{style.header}' cellSpacing='0' cellPadding='0'/>
        </g:north>

        <g:center>
            <g:ScrollPanel>
                <g:FlexTable ui:field='table' styleName='{style.table}' cellSpacing='0' cellPadding='0'/>
            </g:ScrollPanel>
        </g:center>
    </g:DockLayoutPanel>

</ui:UiBinder>
